<template>
  <div class="password_class">
    <div class="form_class">
      <el-form
        ref="passwordForm"
        :model="passwordForm"
        :rules="passwordRules"
        class="password-form"
        auto-complete="on"
        label-position="left"
      >
        <el-form-item prop="old_password">
          <el-input
            v-model="passwordForm.old_password"
            placeholder="请输入原始密码"
            name="old_password"
            auto-complete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="passwordForm.password"
            placeholder="请输新密码"
            auto-complete="on"
            @keyup.enter.native="handlepassword"
          />
        </el-form-item>

        <el-form-item prop="password_confirmation">
          <el-input
            v-model="passwordForm.password_confirmation"
            placeholder="请输入确认密码"
            name="password_confirmation"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handlepassword"
          />
        </el-form-item>

        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handlepassword"
          >确 认</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { updateAdminUserPassword } from "@/api/user";
export default {
  data() {
    return {
      passwordForm: {
        old_password: "",
        password: "",
        password_confirmation: "",
      },
      loading: false,
      passwordRules: {
        old_password: [{ required: true, trigger: "blur", message: "请输入原始密码" }],
        password: [{ required: true, trigger: "blur", message: "请输入新密码" }],
        password_confirmation: [
          { required: true, trigger: "blur", message: "请输入确认密码" },
        ],
      },
    };
  },
  methods: {
    handlepassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          updateAdminUserPassword(this.passwordForm)
            .then(() => {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              this.passwordForm = {
                old_password: "",
                password: "",
                password_confirmation: "",
              };
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.password_class {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 20px;
  .form_class {
    width: 450px;
  }
}
</style>
